<template>
  <div class="ip-order-info">
    <Title title="订单信息" style="margin-bottom: 8px;"/>
    <el-row class="detail-row dividing">
      <el-form label-position="right" label-width="100px">
        <el-col :span="8">
          <el-form-item label="订单编号：">
            <span>{{ detailData.orderNum || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <span>{{ detailData.createTime | format('YYYY/MM/DD HH:mm') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单类型：">
            <span v-if="detailData.orderType || detailData.orderType===0">{{ detailData.orderType | mengliOrderStatus }}</span>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单日期：">
            <span>{{ detailData.orderTime | format('YYYY/MM/DD') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售：">
            <span>{{ detailData.market || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <span>{{ detailData.creator || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称：">
            <span>{{ detailData.clientName || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户类型：">
            <span>{{ detailData.clientType | clientStatus }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="IP形象：">
            <ToolTip :content="detailData.ipInfo"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="含税金额：">
            <span>{{ (detailData.taxAmount/100) | moneyFilter }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="IP授权费：">
            <span>{{ (detailData.licensePrice/100) | moneyFilter }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交付时间：">
            <span>{{ detailData.deliveryTime | format('YYYY/MM/DD') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注：">
            <span>{{ detailData.remark || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件：">
            <FileShowList :file-list="detailData.attachment" is-show-single-file />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签:">
            <TagSelect v-model="detailData.tag" mode="detail" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { moneyFilter } from '@/filters/number';
import { mengliOrderStatus } from '@/filters/status';
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import TagSelect from '@/components/Common/tagSelect';
export default {
  filters: {
    moneyFilter, format, mengliOrderStatus,
    sharingModelType(type) {
      const obj = {
        '0': '保底',
        '1': '分成',
        '2': '保底+分成'
      };
      return obj[String(type)] || '--';
    },
    clientStatus(type) {
      const obj = {
        '0': '公司',
        '1': '个人'
      };
      return obj[String(type)] || '--';
    }
  },
  components: { Title, FileShowList, TagSelect },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-order-info {
  margin-bottom: 16px;
  &::v-deep {
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(3n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        line-height: 30px;
      }
      .el-form-item__content {
        line-height: 30px;
      }
    }
  }
}
.overflow {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}
</style>
